<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重构todoList</title>
    <script src="../vue.global.js"></script>
</head>
<body>
    <div id="root"></div>
  <script>
      // 封装处理input的功能
      const inputRelactiveEffect = () =>{
          const {ref} = Vue;
          const inputVal = ref('123')
          function handleInputValueChange(e){inputVal.value = e.target.value}
          return {inputVal,handleInputValueChange}
      };
      // 封装处理列表功能
      const listRelativeEffect = ()=>{
          const {reactive} = Vue;
          const list = reactive([])
          function addItemToList(item){list.push(item);}
          return {list,addItemToList}
      }
    const app = Vue.createApp({
        template:`
          <div>
          <div>
            <input :value="inputVal" @input="handleInputValueChange"/>
            <div>{{inputVal}}</div>
            <button @click="() => addItemToList(inputVal)">提交</button>
          </div>
          <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
          </ul>
          </div>
        `,
        setup(props,context){
            const {inputVal,handleInputValueChange} = inputRelactiveEffect()
            const {list,addItemToList} = listRelativeEffect()
            return { inputVal,handleInputValueChange,
                     list,addItemToList }
        }
    });
      app.mount('#root')
  </script>
</body>
</html>